<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/css/addBook.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/js/ajaxfileupload.js}"></script>
</head>
<script type="text/javascript">
    function fileChange() {//注意：此处不能使用jQuery中的change事件，因此仅触发一次，因此使用标签的：onchange属性
        $.ajaxFileUpload({
            url: '/prod/ajaxImg.action',//用于文件上传的服务器端请求地址
            secureuri: false,//一般设置为false
            fileElementId: 'pImage',//文件上传控件的id属性  <input type="file" id="pImage" name="pImage" />
            dataType: 'json',//返回值类型 一般设置为json
            success: function (object) //服务器成功响应处理函数
            {
                var imgDiv = $('#imgDiv')
                alert(object.imageUrl);
                console.log(object.imageUrl)
                imgDiv.empty();  //清空原有数据
                //创建img 标签对象
                let imgObj = $("<img alt='photo'>");
                //给img标签对象追加属性
                imgObj.attr("src", '/image_big/' + object.imageUrl);
                imgObj.attr("width", "100px");
                imgObj.attr("height", "100px");
                //将图片img标签追加到imgDiv末尾
                imgDiv.append(imgObj);
                //将图片的名称（从服务端返回的JSON中取得）赋值给文件本框
                //$("#imgName").html(data.imgName);
            },
            error: function (e) {            //服务器响应失败处理函数
                alert(e.message);
            }
        });
    }
</script>
<!--/*@thymesVar id="type" type="com.gnaixeuy.monkeyMi.entity.ProductType"*/-->
<body>
<div id="addAll">
    <div id="nav">
        <p>商品管理>新增商品</p>
    </div>
    <div id="table">
        <form th:action="@{/prod/addProduct.action}" action="#" enctype="multipart/form-data"
              method="post" id="myform">
            <table>
                <tr>
                    <td class="one">商品名称</td>
                    <td><input type="text" name="pName" class="two"></td>
                </tr>
                <!--错误提示-->
                <tr class="three">
                    <td class="four"></td>
                    <td><span id="pnameerr"></span></td>
                </tr>
                <tr>
                    <td class="one">商品介绍</td>
                    <td><input type="text" name="pContent" class="two"></td>
                </tr>
                <!--错误提示-->
                <tr class="three">
                    <td class="four"></td>
                    <td><span id="pcontenterr"></span></td>
                </tr>
                <tr>
                    <td class="one">定价</td>
                    <td><input type="number" name="pPrice" class="two"></td>
                </tr>
                <!--错误提示-->
                <tr class="three">
                    <td class="four"></td>
                    <td><span id="priceerr"></span></td>
                </tr>

                <tr>
                    <td class="three">图片介绍</td>
                    <td><br>
                        <div id="imgDiv" style="display:block; width: 40px; height: 50px;"></div>
                        <br><br><br><br>

                        <input type="file" id="pImage" name="pImage" onchange="fileChange()">
                        <span id="imgName"></span><br>

                    </td>
                </tr>
                <tr class="three">
                    <td class="four"></td>
                    <td><span></span></td>
                </tr>

                <tr>
                    <td class="one">总数量</td>
                    <td><input type="number" name="pNumber" class="two"></td>
                </tr>
                <!--错误提示-->
                <tr class="three">
                    <td class="four"></td>
                    <td><span id="numerr"></span></td>
                </tr>


                <tr>
                    <td class="one">类别</td>
                    <td>
                        <label>
                            <select name="typeId">
                                <option th:each="type : ${#servletContext.getAttribute('ptList')}"
                                        th:value="${type.getTypeId()}" th:text="${type.getTypeName()}">
                                    type
                                </option>
                            </select>
                        </label>
                    </td>
                </tr>
                <!--错误提示-->
                <tr class="three">
                    <td class="four"></td>
                    <td><span></span></td>
                </tr>

                <tr>
                    <td>
                        <input type="submit" value="提交" class="btn btn-success">
                    </td>
                    <td>
                        <input type="reset" value="取消" class="btn btn-default" onclick="myclose(${param.page})">
                        <script type="text/javascript">
                            function myclose(ispage) {
                                window.location = "${pageContext.request.contextPath}/prod/split.action?page=" + ispage;
                            }
                        </script>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>